<template>
  <div class="tabs">
    <el-tag :key="tag.label" size="small" v-for="tag in tags" :closable="tag.name !== 'home'" @close="handleClose(tag)" :disable-transitions="false" @click="changeMenu(tag)" :effect="$route.name === tag.name ? 'dark' : 'plain'" :color="$route.name === tag.name ? 'skyblue' : ''">
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'FirstProjectTab',
  data() {
    return {}
  },
  methods: {
    ...mapMutations({
      close: 'closeTab'
    }),
    handleClose(tag) {
      this.close(tag)
    },
    changeMenu(item) {
      this.$router.push(`${item.path}`)
      this.$store.commit('selectMenu', item)
    }
  },
  computed: {
    ...mapState({
      tags: state => state.tabsList
    })
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  padding: 8px;
  background-color: #e9eef3;
  // border: 1px solid #000;
  padding-left: 18px;
  .el-tag {
    margin-right: 12px;
    cursor: pointer;
    width: 100px;
    height: 38px;
    padding: 0;
    bottom: 0;
    line-height: 30px;
    text-align: center;
    background-color: #fff;
    color: #000;
    font-size: 13px;
  }
  ::v-deep .el-icon-close {
    width: 12px;
    height: 12px;
  }
}
</style>
